<template>
    <div id="checkTrainBox">
        <el-container>
            <el-header style="height:100px">
                <el-container  style="height:100px">
                    <el-aside width="350px">
                        <el-row style="margin-top:40px;margin-left:20px">
                            <el-col :span="6" class="imgCol">
                                <i class="iconfont iconxinzeng pointer" style="font-size:25px;margin-right:10px;color:#409EFF" @click="goToAdd"></i>
                                <span class="pointer" @click="goToAdd">新增</span>
                            </el-col>
                            <!-- <el-col :span="6" class="imgCol">
                                <i class="iconfont iconxuanze pointer" style="font-size:25px;margin-right:10px;color:#409EFF" @click="chooseAction"></i>
                                <span class="pointer" @click="chooseAction">选择</span>
                            </el-col> -->
                             <el-col :span="6" class="imgCol" >
                                <i class=" el-icon-delete pointer" style="font-size:25px;margin-right:10px;color:#fd034f" @click="deleteResure"></i>
                                <span class="pointer" @click="deleteResure">删除</span>
                            </el-col>
                             <!-- <el-col :span="6" class="imgCol" v-show="actionReady" >
                                <i class="el-icon-circle-close pointer" style="font-size:25px;margin-right:10px;color:#409EFF" @click="cancleAction"></i>
                                <span class="pointer" @click="cancleAction">取消</span>
                            </el-col> -->
                        </el-row>
                    </el-aside>
                    <el-main >
                        <el-row style="margin-top:40px;">
                            <el-col :span="4" :offset="3">
                                <el-select v-model="currentStatus" placeholder="请选择" style="width:100px" @change="changeState">
                                    <el-option
                                        v-for="item in status"
                                        :key="item"
                                        :label="status[item]"
                                        :value="item">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="16">
                                <!-- <el-input v-model="keyWord">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input> -->
                                 <el-input placeholder="请输入内容" v-model="keyWord">
                                    
                                    <el-button slot="append" icon="el-icon-search" @click="changeKeyWord"></el-button>
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-header>
            <el-main>
                    <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%"
                             @selection-change="handleSelectionChange">
                            <el-table-column
                                type="selection"
                                width="100">
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="培训名"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="发布时间"
                                width="280">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.state==='已下架'">
                                        <i class="iconfont iconxiajia" style="color: #D0D0D0"></i>
                                        <span style="color: 	#D0D0D0;margin-left: 10px">已下架</span>
                                    </div>
                                    <div v-else-if="scope.row.state==='待审核'">
                                        <i class="el-icon-s-check" style="color:#fd034f"></i>
                                        <span style="color:#fd034f;margin-left: 10px">待审核</span>
                                    </div>
                                    <div v-else>
                                        <i class="el-icon-time"></i>
                                        <span style="margin-left: 10px">{{scope.row.publishTime }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="account"
                                label="报名量">
                                <template slot-scope="scope">
                                    <i class="el-icon-s-custom"></i>
                                    <span style="margin-left: 10px">{{ scope.row.count}}/{{ scope.row.numberLimit}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                prop="action"
                                label="操作"
                            >
                               <template slot-scope="scope">
                                    <el-row>
                                        <el-col :span="12" v-if="scope.row.state==='待发布'">
                                            <el-button
                                                @click.native.prevent="deleteRow(scope.$index, tableData)"
                                                type="primary"
                                                size="mini"
                                                icon="iconfont iconbianji"
                                                plain>
                                                编辑
                                            </el-button>
                                        </el-col>
                                        <el-col :span="12" v-else>
                                            <el-button
                                                @click.native.prevent="goToDetail(scope.row)"
                                                type="warning"
                                                size="mini"
                                                icon="iconfont icontubiao_xiangqing"
                                                plain>
                                                详情
                                            </el-button>
                                        </el-col>
                                        <el-col :span="12" v-if="scope.row.state==='已下架'">
                                            <el-button
                                                disabled
                                                type="danger"
                                                size="mini"
                                                icon="iconfont iconxiajia"
                                                plain>
                                                下架
                                            </el-button>
                                        </el-col>
                                        <el-col :span="12" v-else>
                                            <el-button
                                                @click.native.prevent="deleteRow(scope.row)"
                                                type="danger"
                                                size="mini"
                                                icon="iconfont iconxiajia"
                                                plain>
                                                下架
                                            </el-button>
                                        </el-col>
                                   
                                    </el-row>
                                </template>
                            </el-table-column>
                        </el-table>
            </el-main>
            <el-footer style="margin-top:10px">
                <el-pagination
                    background
                    layout="total,prev, pager, next"
                    :page-size="pageInfo.pageSize"
                    :total="pageInfo.total"
                    @current-change="changePages">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{
            actionReady:false,
            currentStatus:'全部',
            status:['全部','已发布','待审核','已下架'],
            tableData:[],
            pageInfo:{
                pageNo:1,
                pageSize:7,
                total:0,
            },
            keyWord:'',
            deleteGroup:[],
        }
    },
    mounted(){
        var body=document.getElementById('checkTrainBox');
        var height=document.documentElement.clientHeight-120;
        body.style.height=height+'px';
        console.log(height);

        var params={
            pageNo:1,
            pageSize:this.pageInfo.pageSize,
            word:'',
            state:'',
        }
        this.getTrainInfo(params);
    },
    methods:{
        chooseAction(){
            this.actionReady=true;
        },
        cancleAction(){
            this.actionReady=false;
        },
        //下架某个培训
        deleteRow(row){
            var URL=this.IP+'/train/updateTrainClass';
            console.log(URL);
            console.log(row);
            this.$ajax({
                method:'put',
                url:URL,
                params:{
                    trainClassId:row.id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.$message({
                        message: response.data.data,
                        type: 'success'
                    });
                    var state='';
                    if(this.currentStatus=='全部'){
                        state='';
                    }else{
                        state=this.currentStatus;
                    }
                    var params={
                        pageNo:this.pageInfo.pageNo,
                        pageSize:this.pageInfo.pageSize,
                        word:this.keyWord,
                        state:state,
                    }
                    this.getTrainInfo(params);
                    // setTimeout(()=>{
                    //     this.$router.go(0);
                    // },3000)
                }else{
                  this.$message.error(response.data.msg);
                  console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })

        },
        goToDetail(row){
            console.log(row);
            this.$router.push({
                path:'/home/trainDetail',
                query:{
                    id:row.id
                }
            })
        },
        goToAdd(){
            this.$router.push({
                path:'/home/addTrain'
            })
        },
        //获取培训信息
        getTrainInfo(params){
            var URL=this.IP+'/train/trainClassGeneral';
            console.log(URL);
            console.log(params);
            this.$ajax({
                method:'get',
                url:URL,
                params:params
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.tableData=response.data.data.info;
                    this.pageInfo.total=response.data.data.total;
                }else{
                    this.tableData=[];
                    this.pageInfo.total=0;
                  console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //用户翻页
        changePages(pageNo){
            console.log(pageNo);
            this.pageInfo.pageNo=pageNo;
            var state='';
            if(this.currentStatus==='全部'){
                state='';
            }else{
                state=this.currentStatus;
            }
            var params={
                word:this.keyWord,
                state:state,
                pageNo:this.pageInfo.pageNo,
                pageSize:this.pageInfo.pageSize
            }
            this.getTrainInfo(params);

        },
        //修改状态
        changeState(state){
            console.log(state);
            var currentStete='';
            if(state==='全部'){
                currentStete='';
            }else{
                currentStete=state;
            }
            var params={
                word:this.keyWord,
                state:currentStete,
                pageNo:this.pageInfo.pageNo,
                pageSize:this.pageInfo.pageSize
            }
            this.getTrainInfo(params);
        },
        //搜索关键字
        changeKeyWord(){
            var state='';
            if(this.currentStatus==='全部'){
                state='';
            }else{
                state=this.currentStatus;
            }
            this.pageInfo.pageNo=1;
            var params={
                word:this.keyWord,
                state:state,
                pageNo:this.pageInfo.pageNo,
                pageSize:this.pageInfo.pageSize
            }
            this.getTrainInfo(params);
        },
        //确认是否删除
        deleteResure(){
            this.$confirm('此操作将永久删除这些信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
                if(this.deleteGroup.length===0){
                    this.$message({
                        message: '请选择要删除的信息！',
                        type: 'error'
                    });
                }else{
                    this.deleteTrain();
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //批量选中
        handleSelectionChange(val){
            //console.log(val);
            var i=0;
            this.deleteGroup=[];
            for(i=0;i<val.length;i++){
                this.deleteGroup[i]=(val[i].id).toString();
            }
            console.log(this.deleteGroup);
        },
        //批量删除培训
        deleteTrain(){
            var URL=this.IP+'/train/deleteTrainClass';
            console.log(URL);
            this.$ajax({
                method:'DELETE',
                url:URL,
                data:this.deleteGroup
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.$message({
                        message: response.data.data,
                        type: 'success'
                    });
                //     setTimeout(()=>{      
                //         this.$router.go(0);
                //    },2000);
                var state='';
                    if(this.currentStatus=='全部'){
                        state='';
                    }else{
                        state=this.currentStatus;
                    }
                    var params={
                        pageNo:this.pageInfo.pageNo,
                        pageSize:this.pageInfo.pageSize,
                        word:this.keyWord,
                        state:state,
                    }
                    this.getTrainInfo(params);
                }else{
                    this.$message.error(response.data.msg);
                    console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        }
    }
}
</script>
<style>
#checkTrainBox{
/* height:600px; */
background-color:#fff;
margin:15px;
border-radius:5px
}
.el-header,.el-main,.el-footer,.el-aside{
    padding: 0px;
}
.end{
    display: flex;
    justify-content: flex-end;
}
.pointer{
    cursor:pointer;
}
.imgCol{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>